<template>
	<uv-popup ref="popupRef" :closeOnClickOverlay="false" mode="center" :customStyle="{backgroundColor: 'transparent'}">
		<view @click="maskClick" class="animate-box" :class="[animatePlay ? 'animation-scale' : '']">
			<view @click.stop="() => {}" class="back-box" >
				<image class="back-box-bg" src="/static/images/dialog-top.png" mode=""></image>
				<view class="flex items-center justify-center title">
					联系我们
				</view>
				<view class="flex items-center justify-center des">
					点击下面联系方式即可复制
				</view>
				<view @click="clipText(contactInfo.phone, true)" class="flex items-center info-card">
					<view class="info-card-icon">
						<img style="width: 28px;height: 28px;" src="/static/images/phone.png" alt="" srcset="" />
					</view>
					<view class="column info-card-text">
						<view class="text-title">客服电话</view>
						<view class="text-des">
							{{ contactInfo.phone }} ({{ contactInfo.workTime }})
						</view>
					</view>
				</view>
				<view @click="clipText(contactInfo.cEmail)" class="flex items-center info-card"
					style="background: #E6F8EE; margin-top: 12px;">
					<view class="info-card-icon" style="border: 1px solid #0CBF5D;">
						<img style="width: 28px;height: 28px;" src="/static/images/c-email.png" alt=""
							srcset="" />
					</view>
					<view class="column info-card-text">
						<view class="text-title">投诉邮箱</view>
						<view class="text-des">{{ contactInfo.cEmail }}</view>
					</view>
				</view>
				<view @click="clipText(contactInfo.email)" class="flex items-center info-card"
					style="background: #FEF3E9; margin-top: 12px;">
					<view class="info-card-icon" style="border: 1px solid #EEB154;">
						<img style="width: 28px;height: 28px;" src="/static/images/email.png" alt="" srcset="" />
					</view>
					<view class="column info-card-text">
						<view class="text-title">商务合作邮箱</view>
						<view class="text-des">{{ contactInfo.email }}</view>
					</view>
				</view>
				<image @click="close" class="close-btn" src="/static/images/close.png" mode=""></image>
			</view>
			
		</view>
	</uv-popup>
</template>

<script>
	import {
		getConfigApi
	} from "../../api/config";
	export default {
		data() {
			return {
				animatePlay: false,
				contactInfo: {
					phone: "",
					email: "",
					workTime: "",
					cEmail: "",
				},
			};
		},
		mounted() {
			this.initData();
		},
		methods: {
			maskClick(){
				this.animatePlay = true
				setTimeout(() => {
					this.animatePlay = false
				}, 100)
			},
			async initData() {
				const res = await Promise.all([
					getConfigApi({
						id: 6
					}),
					getConfigApi({
						id: 7
					}),
					getConfigApi({
						id: 8
					}),
					getConfigApi({
						id: 9
					}),
				]);
				this.contactInfo.phone = res[0].data.contentInfo;
				this.contactInfo.workTime = res[1].data.contentInfo;
				this.contactInfo.email = res[2].data.contentInfo;
				this.contactInfo.cEmail = res[3].data.contentInfo;
			},
			open() {
				this.$refs.popupRef.open();
			},
			close() {
				this.$refs.popupRef.close();
			},
			clipText(text, isPhone = false) {
				if (isPhone) {
					wx.makePhoneCall({
						phoneNumber: text
					})
					return;
				}
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							icon: 'success',
							title:"复制成功"
						})
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							title:"无法复制到剪切板"
						})
					}
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.animate-box{
		width: 100vw; 
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.1s;
	}
	.animation-scale{
		transform: scale(1.05);
	}
	.close-btn {
		position: absolute;
		z-index: 10001;
		width: 32rpx;
		height: 32rpx;
		top: 32rpx;
		right: 32rpx;
	}

	.back-box {
		background-color: #fff;
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-size: 100% auto;
		border-radius: 4vw;
		padding: 32rpx;
		width: 654rpx;
		position: relative;
		&-bg{
			width: 100%;
			height: 166rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1000;
		}
		.title {
			font-weight: 500;
			font-size: 16px;
			color: #222222;
			line-height: 22px;
			position: relative;
			z-index: 1001;
		}

		.des {
			font-weight: 400;
			font-size: 12px;
			color: #666666;
			line-height: 17px;
			margin-top: 8px;
			margin-bottom: 20px;
			position: relative;
			z-index: 1001;
		}

		.info-card {
			margin: 0 4px;
			padding: 12px;
			background: #E9F6FE;
			border-radius: 10px;
			position: relative;
			z-index: 1001;
			&-text {
				margin-left: 8px;

				.text-title {
					font-weight: 500;
					font-size: 14px;
					color: #222222;
					line-height: 20px;
				}

				.text-des {
					margin-top: 4px;
					font-weight: 400;
					font-size: 11px;
					color: #666666;
					line-height: 16px;
				}
			}

			&-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background: #FFFFFF;
				border: 1px solid #4D6DD4;
			}
		}
	}

	.contact-img {
		width: 72px;
		height: 72px;
		position: fixed;
		right: 12px;
		top: 52.5%;
	}
</style>